<template>
<div>
	<!-- 头部 -->
	<div>
		<van-search
		  v-model="value"
		  shape="round"
		  background="#00669a"
		  placeholder="请输入搜索关键词"
		/>
	</div>
	
	<div>
		<!-- 三个图标，时间，地点，岗位 -->
		<div class="work-two">
			<van-icon name="todo-list" size="2.5rem" @click="time"/>
			<van-icon name="location" size="2.5rem" @click="local"/>
			<van-icon name="star" size="2.5rem" @click="station"/>
		</div>
		<div class="work-two-wenzi">
			<div @click="time">时间</div><div@click="local">地点</div><div@click="station">岗位</div>
		</div>
	</div>
	
	<!-- 时间部分 -->
	<div class="work-three">
		<div>时间
		<van-icon name="descending" /></div>
	</div>
	
	<!-- 分割线 -->
	<div class="line"></div>
	
	<div class="box">
		<div class="box-one">
			<!-- 第一行 -->
			<div class="work-four-first">
				<div class="zhiwei">图书管理员</div>
				<div class="zhiwei zhiwei1">2022-08-12</div>
			</div>
			
			<div class="work-four-two">
				<!-- 工作具体信息 -->
				<div>工作时长&nbsp;&nbsp;4 小时/天</div>
				<div>工作地点&nbsp;&nbsp;第一图书馆</div>
				<div>联系人&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;第一图书馆办公室</div>
			</div>
			<button class="btn">点击了解</button>
		</div>
	</div>
	
	<div class="box">
		<div class="box-one">
			<!-- 第一行 -->
			<div class="work-four-first">
				<div class="zhiwei">图书管理员</div>
				<div class="zhiwei zhiwei1">2022-07-10</div>
			</div>
			
			<div class="work-four-two">
				<!-- 工作具体信息 -->
				<div>工作时长&nbsp;&nbsp;{{text}}</div>
				<div>工作地点&nbsp;&nbsp;{{text}}</div>
				<div>联系人&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{text}}</div>
			</div>
			<button class="btn">点击了解</button>
		</div>
	</div>
	
	<div class="box">
		<div class="box-one">
			<!-- 第一行 -->
			<div class="work-four-first">
				<div class="zhiwei">图书管理员</div>
				<div class="zhiwei zhiwei1">2022-08-12</div>
			</div>
			
			<div class="work-four-two">
				<!-- 工作具体信息 -->
				<div>工作时长&nbsp;&nbsp;{{text}}</div>
				<div>工作地点&nbsp;&nbsp;{{text}}</div>
				<div>联系人&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{text}}</div>
			</div>
			<button class="btn">点击了解</button>
		</div>
	</div>
	
</div>
</template>

<script>
	export default {
		data() {
			return {
				text: '后端数据'
			}
		},
		methods: {
			time() {
				
			},
			local() {
				
			},
			station() {}
		}
	}
</script>

<style scoped lang="less">
.work-two {
	margin-top: 10px;
	display: flex;
	justify-content: space-around;
}
.work-two-wenzi {
		display: flex;
		justify-content: space-around;
		padding-bottom:10px;
		border-bottom: 10px solid #f2f2f2;
	}
	
.work-three {
	font-size: 30px;
	margin-left: 25px;
	margin-top: 10px;
}

.line {
	margin-top: 10px;
	margin-left: 10%;
	width: 80%;
	border-bottom: 2px solid #f2f2f2;
}

.box {
	padding-bottom: 10px;
	border-bottom: 10px solid #f2f2f2;
	margin-top: 20px;
	display: flex;
	justify-content: center;
	.box-one {
		position: relative;
		width: 90%;
		.work-four-first {
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
	}
}

.zhiwei {
	font-weight: bold;
	font-size: 19px;
}

.zhiwei1{
	color: #05699c;
}

.work-four-two {
	margin-top: 5px;
	font-size: 14px;
	color: #c4c4c4;
}

.btn {
	position: absolute;
	bottom: 0;
	right: 0;
	width: 90px;
	font-size: 14px;
	color: white;
	background-color: #00669a;
	border-radius: 4px;
}
</style>
